<template>
  <page-model :breadHeard="breadHeard" @backLast="backLast">
    <desc-title class="mt-20" :descTitle="descTitle"></desc-title>
    <div class="content">
      <el-form :model="versionData" :rules="rules" ref="versionData" label-width="300px">
        <el-form-item label="版本名称：" prop="versionName">
          <el-input v-model="versionData.versionName" placeholder="请输入版本名称" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="版本号：" prop="versionCode">
          <el-input v-model="versionData.versionCode" placeholder="请输入版本号" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="版本描述：" prop="versionDesc">
          <el-input type="textarea" v-model="versionData.versionDesc" maxlength="50" placeholder="请输入版本描述"></el-input>
        </el-form-item>
        <el-form-item label="客户端文件：" prop="versionUrl">
          <el-upload
            class="uploadDoc"
            :action="uploadPdf"
            :limit="1"
            ref="upload"
            accept=".pdf, .PDF, .ppt, .apk, .APK"
            :before-upload="beforeUpload"
            :on-success="onsuccessUpload"
            :with-credentials="true"
            :headers="headOfRequest"
            :show-file-list="false"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">添加</el-button>
          </el-upload>
          <ul class="uploadDocList" v-show="true">
            <li class="uploadDocItem" v-for="(item,index) in learningDTOList" :key="index ">
              <img src="@/assets/document/upload.png" />
              <div class="docTitle">{{item.docTitle}}</div>
              <i class="el-icon-close" @click="deletedocTitle(index)"></i>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <div class="addBtn">
        <span class="confirm flex-center" @click="confirmAdd">确定</span>
      </div>
    </div>
  </page-model>
</template>

<script>
import { getToken } from '@/utils/token'
import { uploadPdf } from '@/api/file'
import { viewClient } from '@/api/appClient'
export default {
  data () {
    return {
      // 上传图片组件的请求头设置
      headOfRequest: { token: getToken() },
      uploadPdf: uploadPdf,
      breadHeard: {
        title: sessionStorage.getItem('versionId') ? '编辑' : '上传',
        firstBread: 'APP客户端管理 ',
        secondBread: sessionStorage.getItem('versionId') ? '编辑' : '上传'
      },
      descTitle: '版本信息',
      isShowProgress: false,
      isShowText: false,
      stroke_width: 10,
      circleColor: '#75FF6D',
      percentage: 0,
      versionData: {
        versionCode: '',
        versionDesc: '',
        versionName: '',
        versionUrl: ''
      },
      rules: {
        versionName: [
          { required: true, message: '请输入版本名称', trigger: 'blur' }
        ],
        versionCode: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        versionUrl: [
          { required: true, message: '请添加客户端文件', trigger: 'change' }
        ]
      },
      // 上传成功的文件的列表,
      learningDTOList: []
    }
  },
  methods: {
    backLast () {
      this.$router.push('/appMain')
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 图片上传之前的钩子
    beforeUpload (file) {
      this.file = file
      this.fileName = file.name
      this.fileSize = file.size
      const reader = new FileReader()
      reader.readAsDataURL(file)
      const that = this
      reader.onload = function () {
        that.fileData = reader.result
      }
    },
    // pdf上传成功
    async onsuccessUpload (response, file, fileList) {
      // console.log('response', response)
      if (response.code === 200) {
        if (this.learningDTOList.length < 1) {
          this.versionData.versionUrl = response.data.id
          this.learningDTOList.push({
            docTitle: response.data.name,
            docUrl: response.data.url,
            isExperts: this.id,
            typeId: ''
          })
        } else {
          this.$message({
            message: '只能上传1个文件',
            type: 'error',
            duration: 500
          })
        }
      } else {
        this.$message({
          message: response.message,
          type: 'error',
          duration: 500
        })
      }
      // console.log(this.learningDTOList)
    },
    // 删除添加的文件
    deletedocTitle (item) {
      this.learningDTOList.splice(item, 1)
    },
    confirmAdd () {
      const params = { ...this.versionData }
      this.$refs.versionData.validate(valid => {
        if (valid) {
          // console.log(params)
          this.$store.dispatch('appClient/addClientData', params).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '编辑成功',
                type: 'success',
                duration: 500
              })
              this.$router.push('/appMain')
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    const versionId = sessionStorage.getItem('versionId')
    if (versionId) {
      viewClient(versionId).then(res => {
        // console.log('res', res)
        if (res.data.code === 200) {
          this.versionData = res.data.data
          this.learningDTOList.push({
            docTitle: res.data.data.versionUrl,
            docUrl: res.data.data.versionUrl
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    }
  },
  computed: {
    isWrite () {
      const versionId = sessionStorage.getItem('versionId')
      return !!versionId
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background-color: #fff;
  height: calc(100% - 192px);
  ::v-deep .el-form {
    .el-input {
      width: 400px;
    }
    .el-textarea {
      width: 560px;
      height: 170px;
      .el-textarea__inner {
        height: 100%;
      }
    }
    .uploadDoc {
      .el-button {
        width: 84px;
        height: 36px;
        background: rgba(72, 104, 255, 1);
        border-radius: 18px;
      }
    }
    .uploadDocList {
      overflow-y: auto;
      position: absolute;
      top: 50px;
      left: 300px;
      width: 560px;
      height: 334px;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        width: 4px;
        height: 120px;
        // scrollbar-arrow-color: red;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: rgba(220, 220, 220, 1);
        // scrollbar-arrow-color: red;
      }
      &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #fff;
      }
      .uploadDocItem {
        position: relative;
        margin-top: 10px;
        width: 560px;
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        height: 72px;
        border: 1px solid rgba(242, 242, 242, 1);
        img {
          margin-top: 15px;
          margin-left: 16px;
          width: 42px;
          height: 42px;
        }
        .docTitle {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: absolute;
          height: 30px;
          width: 290px;
          font-size: 14px;
          left: 70px;
          top: 50%;
          transform: translateY(-50%);
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .el-icon-close {
          cursor: pointer;
          position: absolute;
          line-height: 72px;
          font-size: 16px;
          right: 17px;
          color: #c8c8c8;
        }
      }
      .uploadDocItem:hover {
        border: 1px solid #ff2b2b;
        .el-icon-close {
          color: #ff2b2b;
        }
      }
    }
    .el-form-item__label {
      text-align: right;
      width: 300px !important;
    }
    .el-form-item__error {
      padding-left: 300px;
    }
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "*";
      color: #4868ff;
      margin-right: 4px;
    }
  }
  .addBtn {
    padding-left: 300px;
    position:absolute;
    bottom: 30px;
    .confirm {
      width: 172px;
      height: 48px;
      background: rgba(72, 104, 255, 1);
      border-radius: 24px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }
}
</style>
